"use client";
import { useEffect, useState } from "react";
import { Card, Typography, Descriptions, Spin } from "antd";
import { useMessage } from "@/hooks/useMessage";
import AdminLayout from "@/components/AdminLayout";

const { Title } = Typography;

interface ServerStatus {
  uptime: number;
  platform: string;
  arch: string;
  nodeVersion: string;
  memory: {
    total: number;
    free: number;
    used: number;
  };
  cpu: {
    model: string;
    cores: number;
    speed: number;
  };
}

export default function SystemSettings() {
  const message = useMessage();
  const [status, setStatus] = useState<ServerStatus | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/admin/server-status")
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          setStatus(data.data);
        } else {
          message.error("获取服务器状态失败");
        }
      })
      .catch(() => message.error("获取服务器状态失败"))
      .finally(() => setLoading(false));
  }, []);

  return (
    <AdminLayout>
      <Title level={3}>系统设置</Title>
      <Card title="服务器运行状态" style={{ marginBottom: 24 }}>
        {loading ? (
          <Spin />
        ) : status ? (
          <Descriptions bordered column={1}>
            <Descriptions.Item label="操作系统">{status.platform} ({status.arch})</Descriptions.Item>
            <Descriptions.Item label="Node 版本">{status.nodeVersion}</Descriptions.Item>
            <Descriptions.Item label="CPU">{status.cpu.model} × {status.cpu.cores} @ {status.cpu.speed}MHz</Descriptions.Item>
            <Descriptions.Item label="内存">
              {((status.memory.used / 1024 / 1024).toFixed(1))} MB / {((status.memory.total / 1024 / 1024).toFixed(1))} MB
            </Descriptions.Item>
            <Descriptions.Item label="运行时长">{Math.floor(status.uptime / 60)} 分钟</Descriptions.Item>
          </Descriptions>
        ) : (
          <span>无法获取服务器状态</span>
        )}
      </Card>
      {/* 未来可扩展的系统设置项 */}
    </AdminLayout>
  );
}